<template>
  <el-row>
    <el-card>
      <el-form
        ref="form"
        class="demo-ruleForm"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            @keyup.enter.native="onSubmit('form')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSubmit('form')">登陆</el-button>
          <el-button @click="clear('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>
</template>
<script>
import md5 from "js-md5";
export default {
  name: "Login",
  data() {
    return {
      form: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { max: 20, message: "最长20个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户面不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.password = this.md5password;
          // console.log(JSON.stringify(this.form));
          this.$Sev.post("/api/login", this.form, (data) => {
            if (data && data.length !== 0) {
              sessionStorage.setItem("token", data);
              this.$router.push({ path: "updateInfo/uaboutme" });
            } else {
              this.tips("账号密码不正确!");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    clear(formName) {
      this.$refs[formName].resetFields();
    },
    tips(val) {
      this.$mb(val, "登陆错误", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
  },
  computed: {
    md5password() {
      let mp = this.form.password;
      if (mp) {
        mp = md5(mp);
      }
      return mp;
    },
  },
};
</script>
<style scoped>
.el-form {
  margin-top: 30px;
}
.el-row {
  /* background-image: url("../assets/bjtp.jpg"); */
  /* background-repeat: no-repeat; */
  /* background-size: 2000px 1000px; */
  margin: 0% auto;
  width: 100%;
  height: 100%;
  position:absolute;
  left: 0px;
  top:10px;
}

.el-card {
  border-radius: 30px;
  margin: 0 auto;
  margin-top: 15%;
  text-align: center;
  width: 500px;
  height: 250px;
}
</style>
